<template>
    <div class="channel">
        <div class="channel-top">
            <div class="channel-top-l">
                <div class="channel-top-l-title wow bounceInLeft" data-wow-delay=".3s" data-wow-duration="0.4s">
                    品达集团合伙人计划
                </div>
                <div class="channel-top-l-setails wow bounceInLeft" data-wow-delay=".3s" data-wow-duration="0.8s">
                    与各行业合作伙伴携手<br />打造共生、共赢的数智生态体系
                </div>
                <div class="channel-top-l-consulting wow bounceInLeft" data-wow-delay=".3s" data-wow-duration="1.2s">
                    <vs-button @click="openInfoDialog" style="background: linear-gradient(311deg, #5F79FF 0%, #71EEFF 100%);
                    font-size: 18px;
                    padding: 6px 0;
                    width: 170px;
                    ">
                        我要加盟 <img style="margin-left:4px" src="https://static.pdwl.net/jituan/images/zixun.png" alt="">
                        <template #animate>
                            <img src="https://static.pdwl.net/jituan/images/zixun.png" alt="">
                        </template>
                    </vs-button>
                </div>
            </div>
            <div class="channel-top-r">
                <!-- <img src="https://static.pdwl.net/jituan/images/channel/icon13.png" alt="" srcset=""> -->
                <!-- <div class="channel-top-r-text text wow bounceInRight" data-wow-delay=".3s" data-wow-duration="0.3s">
                    全国OEM36个
                </div>
                <div class="channel-top-r-text text1 wow bounceInRight" data-wow-delay=".3s" data-wow-duration="0.6s">
                    全国代理商800+
                </div>
                <div class="channel-top-r-text text2 wow bounceInRight" data-wow-delay=".3s" data-wow-duration="0.9s">
                    合作客户20000+
                </div>
                <div class="channel-top-r-text text3 wow bounceInRight" data-wow-delay=".3s" data-wow-duration="1.2s">
                    均预存款50000+
                </div> -->
            </div>
        </div>
        <div class="channel-content">
            <div class="channel-content-services">
                <div class="head">
                    <div class="head-title wow fadeInUp" data-wow-delay=".3s" data-wow-duration="0.4s">服务支持</div>
                    <div class="head-details wow fadeInUp" data-wow-delay=".3s" data-wow-duration="0.8s">携手品达集团 共掘万亿市场
                    </div>
                </div>
                <div class="channel-content-services-data">
                    <div class="flex_cen ">
                        <div class="channel-content-services-data-list" v-for="(item, idx) of servicesList" :key="idx">
                            <div class="channel-content-services-data-list-icon"><i :class="`iconfont ${item.icon}`"></i>
                            </div>
                            <div class="channel-content-services-data-list-few">{{ item.id }}</div>
                            <div class="channel-content-services-data-list-title">{{ item.title }}</div>
                            <div class="channel-content-services-data-list-details">{{ item.details }}</div>
                            <div class="channel-content-services-data-list-g"></div>
                        </div>
                    </div>
                    <div class="flex_cen ">
                        <div class="channel-content-services-data-list" v-for="(item, idx) of servicesList1" :key="idx">
                            <div class="channel-content-services-data-list-icon"><i :class="`iconfont ${item.icon}`"></i>
                            </div>
                            <div class="channel-content-services-data-list-few">{{ item.id }}</div>
                            <div class="channel-content-services-data-list-title">{{ item.title }}</div>
                            <div class="channel-content-services-data-list-details">{{ item.details }}</div>
                            <div class="channel-content-services-data-list-g"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="channel-content-partnership">
                <div class="head" style="margin-top:0 ;">
                    <div class="head-title wow fadeInUp" data-wow-delay=".3s" data-wow-duration="0.4s">合伙条件</div>
                    <div class="head-details wow fadeInUp" data-wow-delay=".3s" data-wow-duration="0.8s">
                        合伙共创是你我的选择，也是时代的选择</div>
                </div>
                <div class="partnership-data">
                    <img class="partnership-data-bg" src="https://static.pdwl.net/jituan/images/channel/icon1.png" alt="" srcset="">
                    <div class="partnership-data-text dataText">
                        <div class="partnership-data-text-num">01</div>
                        <div class="partnership-data-text-details">认同品达商业模式，同意相关<br/>服务条款及市场定价。</div>
                    </div>
                    <div class="partnership-data-text dataText1">
                        <div class="partnership-data-text-num">02</div>
                        <div class="partnership-data-text-details">符合国家相关法律法规规定，<br/>具备基本从业资格的企业。</div>
                    </div>
                    <div class="partnership-data-text dataText2">
                        <div class="partnership-data-text-num">03</div>
                        <div class="partnership-data-text-details">熟悉当地区域经济发展状况，能够<br/>拓展本地垂直服务商加盟体系。</div>
                    </div>
                    <div class="partnership-data-text dataText3">
                        <div class="partnership-data-text-num">04</div>
                        <div class="partnership-data-text-details">接受总部系统派单服务，快速<br/>响应客户需求，依法履行服务<br/>协议。</div>
                    </div>
                    <div class="partnership-data-text dataText4">
                        <div class="partnership-data-text-num">05</div>
                        <div class="partnership-data-text-details">专职服务团队，拥有固定的办公场<br/>地，具备开展相关办公条件。</div>
                    </div>
                </div>
                <div class="flex_cen partnership-process">
                    <div class="partnership-process-text flex_cen"><i class="iconfont icon-yiwancheng2"></i> 提交申请</div>
                    <div class="partnership-process-next"><i class="iconfont icon-youzhijiantou1"></i></div>
                    <div class="partnership-process-text flex_cen"><i class="iconfont icon-shenhemokuai2"></i> 审核资料</div>
                    <div class="partnership-process-next"><i class="iconfont icon-youzhijiantou1"></i></div>
                    <div class="partnership-process-text flex_cen"><i class="iconfont icon-talk-s"></i> 洽谈合作</div>
                    <div class="partnership-process-next"><i class="iconfont icon-youzhijiantou1"></i></div>
                    <div class="partnership-process-text flex_cen"><i class="iconfont icon-hezuo"></i> 签约合作</div>
                </div>
            </div>
            <div class="channel-content-co-creation">
                <div class="head" >
                    <div class="head-title wow fadeInUp" data-wow-delay=".3s" data-wow-duration="0.4s">共创客户</div>
                    <div class="head-details wow fadeInUp" data-wow-delay=".3s" data-wow-duration="0.8s">
                        财富密码，全国启动</div>
                </div>
                <div class="flex_cen co-creation-data">
                    <div class="co-creation-data-l"> 
                        <div class="co-creation-data-l-t">
                            <img src="https://static.pdwl.net/jituan/images/channel/icon5.png" alt="" srcset="">
                        </div>
                        <div class="co-creation-data-l-b flex_start">
                            <img src="https://static.pdwl.net/jituan/images/channel/icon6.png" alt="" srcset="">
                            <img src="https://static.pdwl.net/jituan/images/channel/icon7.png" alt="" srcset="">
                        </div>
                    </div>
                    <div class="co-creation-data-r">
                        <div class="flex_start co-creation-data-r-t">
                            <div class="coCreationList" v-for="(item,idx) of coCreationList" :key="idx">
                                <img :src="item.img" alt="" v-if="idx != 0">
                                <div class="coCreationList-active" v-else>
                                    <div class="coCreationList-active-title">招商扶持</div>
                                    <div class="coCreationList-active-details">牛视代理商经验交流</div>
                                    <div class="coCreationList-active-next"><i class="iconfont icon-jiantou_youxia"></i></div>
                                </div>
                            </div>
                        </div>
                        <div class="flex_start co-creation-data-r-t">
                            <div class="coCreationList coCreationList1" v-for="(item,idx) of coCreationList1" :key="idx">
                                <img :src="item.img" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <Footer :type="3"></Footer>
        <InfoDialog ref="infoDialog"></InfoDialog>
    </div>
</template>
<script>
import  InfoDialog from '@/components/infoDialog'
import  Footer from '@/components/footer/index.vue'
export default {
    components:{Footer,InfoDialog},
    data() {
        return {
            coCreationList:[
                {
                    img:'https://static.pdwl.net/jituan/images/channel/icon8.png',
                    title:'品牌支持',
                    details:'牛视代理商经验交流'
                },
                {
                    img:'https://static.pdwl.net/jituan/images/channel/icon9.png',
                    title:'品牌支持',
                    details:'牛视代理商经验交流'
                },
                {
                    img:'https://static.pdwl.net/jituan/images/channel/icon11.png',
                    title:'品牌支持',
                    details:'牛视代理商经验交流'
                }
            ],
            coCreationList1:[
                {
                    img:'https://static.pdwl.net/jituan/images/channel/icon8.png',
                    title:'品牌支持',
                    details:'牛视代理商经验交流'
                },
                {
                    img:'https://static.pdwl.net/jituan/images/channel/icon10.png',
                    title:'品牌支持',
                    details:'牛视代理商经验交流'
                },
                {
                    img:'https://static.pdwl.net/jituan/images/channel/icon12.png',
                    title:'品牌支持',
                    details:'牛视代理商经验交流'
                }
            ],
            servicesList: [
                {
                    icon: 'icon-Frame',
                    id: '01',
                    title: '品牌支持',
                    details: '全面品牌宣传获客，渠道获取客户线索分发。'
                },
                {
                    icon: 'icon-Frame-2',
                    id: '02',
                    title: '产品支持',
                    details: '集团全系列产品，按销售额分成。'
                },
                {
                    icon: 'icon-Frame-4',
                    id: '03',
                    title: '会销支持',
                    details: '专业会销讲师团队，落地会销扶持。'
                }
            ],
            servicesList1: [
                {
                    icon: 'icon-Frame-1',
                    id: '04',
                    title: '运营支持',
                    details: '销售团队搭建、运营团队搭建、客户交付，全流程陪跑。'
                },
                {
                    icon: 'icon-Frame-3',
                    id: '05',
                    title: '资金支持',
                    details: '优秀运营中心需要资金，集团可入股，提供资金支持。'
                },
                {
                    icon: 'icon-Frame-5',
                    id: '06',
                    title: '法务支持',
                    details: '合同审核、协议签订等专业法务团队支持。'
                }
            ]
        }
    },
    beforeCreate() {
        let imgs = [
            "https://static.pdwl.net/jituan/images/zixun.png",
            "https://static.pdwl.net/jituan/images/zixun.png",
            "https://static.pdwl.net/jituan/images/channel/icon5.png",
            "https://static.pdwl.net/jituan/images/channel/icon6.png",
            "https://static.pdwl.net/jituan/images/channel/icon7.png",
            "https://static.pdwl.net/jituan/images/channel/icon8.png",
            "https://static.pdwl.net/jituan/images/channel/icon9.png",
            "https://static.pdwl.net/jituan/images/channel/icon11.png",
            "https://static.pdwl.net/jituan/images/channel/icon10.png",
            "https://static.pdwl.net/jituan/images/channel/icon12.png",
            "https://static.pdwl.net/jituan/images/channel/icon3.png",
            "https://static.pdwl.net/jituan/images/channel/icon4.png",
            "https://static.pdwl.net/jituan/images/channel/icon2.png",
        ]
        imgs.forEach((item)=>{
            let img = new Image();
            img.src = item;
            img.onload = function(){}
        })
    },
    mounted() {
        var wow = new this.$WOW({
            boxClass: 'wow',
            animateClass: 'animated',
            offset: 0,
            mobile: false,
            live: true,
            scrollContainer: null
        })
        wow.init();
    },
    methods:{
        openInfoDialog(){
            this.$refs.infoDialog.openInfoDialog()
        },
    }
}
</script>
<style lang="scss" scoped>
.channel {
    .channel-top {
        background-image: url('https://static.pdwl.net/jituan/images/channel/icon3.png');
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;
        height: 720px;
        width: 100%;
        position: relative;

        &-l {
            position: absolute;
            left: 17%;
            top: 200px;

            &-title {
                font-size: 80px;
                font-family: Microsoft YaHei-Bold, Microsoft YaHei;
                font-weight: bold;
                color: #FFFFFF;
            }

            &-setails {
                font-size: 40px;
                font-family: Microsoft YaHei-Light, Microsoft YaHei;
                font-weight: 300;
                color: #FFFFFF;
                line-height: 56px;
                letter-spacing: 4px;
                margin-top: 20px;
            }

            &-consulting {
                margin-top: 61px;
            }
        }

        &-r {
            position: absolute;
            right: 0;
            bottom: 42px;

            img {
                width: 832px;
                height: 400px;
                background-size: 100% 100%;
            }

            &-text {
                position: absolute;
                font-size: 30px;
                font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                font-weight: 400;
                line-height: 35px;
                text-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5);
                background: linear-gradient(90deg, #006FFF 0%, #62DEA6 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                white-space: nowrap;
            }

            .text {
                right: 718px;
                bottom: 85px;
            }

            .text1 {
                right: 513px;
                bottom: 137px;
            }

            .text2 {
                right: 323px;
                bottom: 229px;
            }

            .text3 {
                right: 224px;
                bottom: 337px;
            }

        }
    }

    .channel-content {
        &-services {
            background-image: url('https://static.pdwl.net/jituan/images/channel/icon4.png');
            background-repeat: no-repeat;
            background-position: center;
            background-size: 100% 100%;
            height: 800px;
            width: 100%;
            position: relative;
            &-data {
                width: 70%;
                margin: 0 auto;

                &-list {
                    width: 358px;
                    height: 200px;
                    background: rgba(0, 0, 0, 0.5);
                    border-radius: 0px 0px 0px 0px;
                    border: 1px solid rgba(255, 255, 255, 0.2);
                    margin: 0 20px 20px 0;
                    position: relative;
                    padding: 30px 26px;

                    &-icon {
                        position: absolute;
                        right: 30px;
                        top: 30px;

                        i {
                            background: linear-gradient(124deg, #006FFF 0%, #62DEA6 100%);
                            font-size: 60px;
                            -webkit-background-clip: text;
                            -webkit-text-fill-color: transparent;
                        }
                    }

                    &-few {
                        font-size: 40px;
                        font-weight: bold;
                        color: #FFFFFF;
                        line-height: 47px;
                    }

                    &-title {
                        font-size: 30px;
                        font-weight: 400;
                        color: #FFFFFF;
                        margin-top: 5px;
                        line-height: 35px;
                    }

                    &-details {
                        font-size: 18px;
                        font-weight: 300;
                        margin-top: 15px;
                        color: #FFFFFF;
                        line-height: 24px;
                    }

                    &-g {
                        width: 360px;
                        height: 2px;
                        position: absolute;
                        bottom: 30px;
                        background: linear-gradient(90deg, #006FFF 0%, #62DEA6 100%);
                    }
                    transition: all .3s;
                    &:hover{
                        transform: scale(1.05);
                    }
                }
            }
        }

        &-partnership {
            background-image: url('https://static.pdwl.net/jituan/images/channel/icon2.png');
            background-repeat: no-repeat;
            background-position: center;
            background-size: 100% 100%;
            height: 1349px;
            object-fit: contain;
            width: 100%;
            position: relative;
            // margin-top: -70px;
            .partnership-process{
                position: absolute;
                bottom: 90px;
                width: 100%;
                &-text{
                    width: 281px;
                    height: 72px;
                    background: #000000;
                    text-align: center;
                    line-height: 72px;
                    font-size: 18px;
                    border: 1px solid;
                    border-image: linear-gradient(90deg, rgba(0, 111, 255, 1), rgba(98, 222, 166, 1)) 1 1;
                    i{
                        margin-right: 15px;
                        background: linear-gradient(124deg, #006FFF 0%, #62DEA6 100%);
                        -webkit-background-clip: text;
                        -webkit-text-fill-color: transparent;
                        font-size: 26px;
                    }
                    transition: all .3s;
                    &:hover {
                        // width: 300px;
                        // height: 64px;
                        // background: linear-gradient(90deg, #006FFF 0%, #62DEA6 100%);
                        // border-radius: 6px;
                        // font-size: 18px;
                        // border: 1px solid;
                        // line-height: 64px;
                        // border-image: linear-gradient(90deg, rgba(0, 111, 255, 1), rgba(98, 222, 166, 1)) 1 1;
                        // margin: 0;
                        // transform: translateY(-10px);
                        transform: scale(1.05);
                    }
                }
                &-next{
                    margin:0 18px;
                    i{
                        margin-left: 15px;
                        background: linear-gradient(124deg, #006FFF 0%, #62DEA6 100%);
                        -webkit-background-clip: text;
                        -webkit-text-fill-color: transparent;
                        font-size: 23px;
                    }
                }
                
            }
            .partnership-data {
                .partnership-data-bg {
                    height: 1195px;
                    width: 100%;
                    position: absolute;
                    top: 500px;
                    background-size: 100% 100%;
                    object-fit: contain;
                    left: 50%;
                    transform: translate(-50%, -50%);
                }

                &-text {
                    position: absolute;
                    text-align: right;
                    &-num {
                        width: 91px;
                        height: 91px;
                        border: 1px solid transparent;
                        border-radius: 50%;
                        background-clip: padding-box, border-box;
                        background-origin: padding-box, border-box;
                        text-align: center;
                        line-height: 91px;
                        margin: 0 0 0 auto;
                        margin-top: 20px;
                        font-size: 40px;
                        font-weight: bold;
                        background-image: linear-gradient(to right, #000, #000), linear-gradient(124deg, rgba(0, 111, 255, 1), rgba(98, 222, 166, 1)) ;
                    }
                    &-details{
                        font-size: 22px;
                        font-weight: 400;
                        color: #FFFFFF;
                        line-height: 26px;
                        margin-top: 20px;
                        
                    }
                }
                .dataText{
                    left: 325px;
                    top: 215px
                }
                .dataText1{
                    right: 346px;
                    top: 240px;
                    .partnership-data-text-num{
                        margin: 0 auto 0 0;

                    }
                }
                .dataText2{
                    left: 278px;
                    top: 668px
                }
                .dataText3{
                    right: 341px;
                    top: 728px;
                    .partnership-data-text-num{
                        margin: 0 auto 0 0;

                    }
                }
                .dataText4{
                    left: 49.6%;
                    bottom: 276px;
                    transform: translateX(-50%);
                    .partnership-data-text-num{
                        margin: 0 auto;

                    }
                }
            }
        }
        &-co-creation{
            .co-creation-data{
                width: 70%;
                margin: 58px auto 0;
                &-l{
                    &-t{
                        width: 305px;
                        height: 220px;
                        transition: all .3s;
                        &:hover{
                            transform: scale(1.05);
                        }
                        img{
                            width: 100%;
                            height: 100%;
                            background-size: 100% 100%;

                        }
                    }
                    &-b{
                        width: 305px;
                        height: 170px;
                        img{
                            width: 100%;
                            height: 100%;
                            background-size: 100% 100%;

                        }
                        transition: all .3s;
                        &:hover{
                            transform: scale(1.05);
                        }
                    }

                }
                &-r{
                    .coCreationList{
                        width: 305px;
                        height: 185px;
                        margin-left:20px ;
                        margin-bottom: 20px;
                        position: relative;
                        img{
                            width: 100%;
                            height: 100%;
                            background-size: 100% 100%;

                        }
                        &-active{
                            width: 305px;
                            height: 185px;
                            background: linear-gradient(124deg, #006FFF 0%, #62DEA6 100%);
                            &-title{
                                padding: 30px 0 0 45px;
                                font-size: 18px;
                            }
                            &-details{
                                padding: 10px 0 0 45px;
                                font-size: 24px;
                            }
                            &-next{
                                position: absolute;
                                bottom: 17px;
                                right: 17px;
                                i{
                                    font-size: 17px;
                                    color: #fff;
                                }
                            }
                        }
                        transition: all .3s;
                        &:hover{
                            transform: scale(1.05);
                        }
                    }
                    .coCreationList1{
                        margin-bottom: 0;
                    }

                }
            }
        }
    }
}</style>
